<template>
    <div class="pack">
        <el-container>
            <el-header>
                <el-button type="primary" @click="addUI" icon="el-icon-plus">添加任务</el-button>
            </el-header>
            <el-main>
                <!-- 工具栏 -->
                <BugsWorkUIVue
                    @loadTable="loadTable"
                    @loadOption="loadOption"
                    :options="options"
                    :form="form"
                    :mode="mode"
                    ref="formUI"
                />
                <!-- Table -->
                <el-table :data="table">
                    <!-- 折叠 -->
                    <el-table-column type="expand">
                        <template slot-scope="scope">
                            <el-form label-position="left" inline>
                                <p>
                                    <el-form-item class="detail" label="启始URL">
                                        <a
                                            target="_blank"
                                            :href="scope.row.startUrl"
                                        >{{scope.row.startUrl}}</a>
                                    </el-form-item>
                                </p>
                                <p>
                                    <el-form-item class="detail" label="最近执行时间">
                                        <span>{{scope.row.actionTime}}</span>
                                    </el-form-item>
                                </p>
                                <p>
                                    <el-form-item class="detail" label="更新信息条目">
                                        <span>{{scope.row.saveDbCount}}</span>
                                    </el-form-item>
                                </p>
                            </el-form>
                        </template>
                    </el-table-column>
                    <!-- 列表 -->
                    <el-table-column label="爬虫名称" prop="name" width="280" />
                    <el-table-column label="程序别名" prop="reptileClass" width="200" />
                    <el-table-column label="状态" prop="actioning">
                        <template slot-scope="scope">
                            <el-button
                                @click="controlleTask(scope.row)"
                                :type="scope.row.actioning ? 'primary' : 'info'"
                                :icon="scope.row.actioning ? 'el-icon-loading' : 'el-icon-video-play'"
                            >{{scope.row.actioning ? '执行中' : '未执行'}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="updateUI(scope.row.id)" type="text" size="small">编辑</el-button>
                            <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import { fetchPost, fetchPostAuthLogin } from "../../http";
import BugsWorkUIVue from "../../components/pages/BackUserManage/BugsWorkUI.vue";

export default {
    components: { BugsWorkUIVue },
    data() {
        return {
            options: null,
            form: {
                name: "",
                reptileClass: "",
                startUrl: ""
            },
            table: new Array(),
            mode: "save" // save or update
        };
    },
    created() {
        this.loadOption();
        this.loadTable();
    },
    methods: {
        addUI() {
            this.mode = "save";
            this.$refs.formUI.open();
        },
        async updateUI(id) {
            this.mode = "update";
            let self = this;
            await fetchPost("/workBug/getById", { id: id }).then(res => {
                self.form = res.data;
            });
            this.$refs.formUI.open();
        },
        deleteById(id) {
            let self = this;
            fetchPost("/workBug/delete", { id: id }).then(() => {
                self.loadTable();
            });
        },
        async controlleTask(row) {
            let nextStatus = !row.actioning;
            if (nextStatus) {
                await fetchPost("/workBug/action_work", { id: row.id });
            } else {
                await fetchPost("/workBug/action_suspend", { id: row.id });
            }
            row.actioning = nextStatus;
        },
        loadOption() {
            let self = this;
            fetchPost("/workBug/getOption").then(res => {
                self.options = res.data;
            });
        },
        loadTable() {
            let self = this;
            fetchPost("/workBug/list").then(res => {
                self.table = res.data;
            });
        }
    }
};
</script>
<style>
.detail .el-form-item__label {
    width: 130px;
    color: #99a9bf;
}
</style>